import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as Actions from '../../actions/order'
import utils from '../../utils'
import Header from '../../components/Header'
import MeScrollContainer from '../../components/MeScroll'
import OrderProductItem from '../../components/OrderProductItem'
//订单状态(10:待支付 20:待发货 30:待收货 40:退货中 50:退款中 60:纠纷中 80:已关闭 90:完成)
class OrderDetails extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    this.state = {
      
    }
  }
  componentDidMount(){
    let {actions,params} =this.props 
    actions.getOrderDetails({
      order_id:params.id,
      order_goods:1, //是否需要订单商品信息标识(可选参数 0:不需要 1:需要)
      order_address:1 //是否需要订单收货人信息(可选参数 0:不需要 1:需要)
    })
    

   
  }
  


  render(){
  	let { orderInfo} =this.props
    let { recv_address,goods_list} =orderInfo
    var orderStatus=''
    switch(orderInfo.order_status) {
      case '10':
        orderStatus='To be paid'
        break;
      case '20':
        orderStatus='Pending delivery'
        break;
      case '30':
        orderStatus='Goods to be received'
        break
    /*  case '40':
        orderStatus='In return'
        break
      case '50':
        orderStatus='Refunds'
        break
      case '60':
        orderStatus='In the complaint'
        break*/
      case '40': case '50': case '60': case '100':
       orderStatus='Abnormal single'
        break;
      case '80':
       orderStatus='Closed'
        break;
      case '90':
       orderStatus='Completed'
        break;
    }
    return(
    <div className='order-details-container'>
        <Header key='a' title={'Order details'} leftBtn={true} leftBtnTouch={()=>{
            this.context.router.history.goBack()
          }}/>
          <MeScrollContainer>
            <div className='order-header'>
               <div className={`seller-state  state_${orderInfo.order_status}`} >{orderStatus}</div>
            </div>
            <div className='address-context'>
              <i className='iconfont icon-dizhi'></i>
              <div className='aleft'>
                <p className="p1">addressee：<span className='txt'>{recv_address.contact_name}  {recv_address.contact_mobile}</span></p>
                <p className="p2" style={{'paddingTop':"8px"}}>Address of the consignee：
                  <span className='txt'>{recv_address.order_address}</span>
                </p>
              </div>
            </div>
            {
              goods_list.map((item,i) =>{
                return(
                  <div key={i}>
                    <OrderProductItem 
                    item={item}  
                    fromPage ={'order'} 
                    onClickLeft={()=>{ this.context.router.history.push(`/goods/${item.goods_id}`)}}
                    onClickLeft_gift={(id,type,e) =>{ e.stopPropagation; this.context.router.history.push(`/subGoods/${id}/${type}`) }}
                    />
                  </div>
                  
                  )
              })
            }

            <div className='buyer-context margin-top-10'>
              <div className='oinput-item'>
                <span className='s1'>Buyer's notes:</span>
                <span className='s2' >{orderInfo.note}</span>
              </div>
              <div className='oinput-item'>
                <span className='s1'>freight:</span>
                <span   className='s2' >${orderInfo.shipping_price||0}</span>
              </div>
              <div className='oinput-item'>
                <span className='s1'>Real payment（Freight charges）:</span>
                <span   className='s2 red' >${orderInfo.payed_price||0}</span>
              </div>
            </div>

            <div className='buyer-context margin-top-10'>
              <div className='i-item'>
                OrderCode:{orderInfo.order_sn}
              </div>
              <div className='i-item'>
                CreatTime:{orderInfo.create_at}
              </div>
            </div>
          </MeScrollContainer>
    </div>
    )
        
          
         
       
    
  }
 
}
function mapStateToProps(state){
  return{ 
    orderInfo:state.orderInfo.toJS()
  }
}
function mapDispatchToProps(dispatch){
  return{
    actions:bindActionCreators(Actions,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(OrderDetails)


